<template>
    <div class="page">
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">激活</span>
                </div>
            </van-nav-bar>
        </div>

        <!--小区信息-->
        <div class="module-box form-info">
            <div class="title">小区信息</div>

            <van-cell-group>
                <van-field label="小区名称" v-model="formInfo.communityName" required/>

                <van-field label="物业电话" v-model="formInfo.propertyPhone" required/>

                <van-field label="省/市/区" required>
                    <div slot="input" @click="clickArea()">
                        <span>上海市</span> -
                        <span>上海市</span> -
                        <span>{{formInfo.domain ? formInfo.domain : '请选择区'}}</span>
                    </div>
                </van-field>

                <van-field label="详细地址" v-model="formInfo.detailAddress" required/>
            </van-cell-group>
        </div>

        <!--管理员信息-->
        <div class="module-box form-info">
            <div class="title">管理员信息</div>

            <van-cell-group>
                <van-field label="姓名" v-model="formInfo.managerName" required disabled/>

                <van-field label="手机号" v-model="formInfo.managerPhone" required disabled/>

                <van-field v-model="formInfo.captcha" label="验证码" required>
                    <div slot="button" class="captcha-box">
                        <div class="img-code" ref="imgCode">

                        </div>
                        <span class="get-captcha" @click="getImgCode()">获取验证码</span>
                    </div>
                </van-field>
            </van-cell-group>
        </div>

        <!--温馨提示-->
        <div class="module-box tips-info">
            <div class="title">温馨提示激活流程：</div>
            <p>1.填写完成信息后，提交信息</p>
            <p>2.系统管理员会在2个工作日进行审核激活</p>
            <p>3.激活完成后会以短信的形式进行提醒</p>
        </div>

        <div class="btn-box">
            <van-button block @click="submit()">提交</van-button>
        </div>


        <!--省市区上拉弹框-->
        <van-action-sheet v-model="showAreaBox" title="选择省/市/区">
            <van-area :area-list="areaList" value="310000" @confirm="areaConfirm" @cancel="areaCancel"/>
        </van-action-sheet>

    </div>
</template>

<script>
    import {NavBar, Field, CellGroup, Button, Area, ActionSheet, Toast} from 'vant';
	import area from '../assets/js/area';

    export default {
        name: 'activateVillage',

        components: {
            [NavBar.name]: NavBar,
			[CellGroup.name]: CellGroup,
            [Field.name]: Field,
			[Button.name]: Button,
			[Area.name]: Area,
			[ActionSheet.name]: ActionSheet,
			[Toast.name]: Toast,
        },

        props: {},

        data() {
            return {
            	//表单信息
            	formInfo: {
					communityName: '',
					propertyPhone: '',
					domain: '',
					detailAddress: '',
					managerName: this.$Cookies.get('personName'),
					managerPhone: this.$Cookies.get('personPhone'),
					captcha: '',
                },

				name: '',
				address: '',
				shortCode: '',

				showAreaBox: false,
				areaList: {
					'province_list': {310000: '上海市'},
					'city_list': {310100: '上海市'},
					'county_list': {},
				},
				countyInfo: {
					code: '',
					name: '',
				},
            }
        },

        mounted() {
			this.areaList['county_list'] = {...area['county_list']};
        },

        methods: {
            //点击返回
            onClickLeft(){
                this.$router.go(-1);
            },

			//点击提交
			submit(){
				//必填信息验证
				if(!this.formInfo.communityName || !this.formInfo.propertyPhone || !this.formInfo.domain
                  || !this.formInfo.detailAddress || !this.formInfo.managerName || !this.formInfo.managerPhone
                  || !this.formInfo.captcha){
					Toast('请录入必填信息');
					return;
				}

				this.$axios.post(this.$api.registerCommunity, {
					currentOpenId: this.$Cookies.get('openId'),    //当前微信号的openID
					communityName: this.formInfo.communityName,
					propertyPhone: this.formInfo.propertyPhone,
					domain: this.formInfo.domain,
					detailAddress: this.formInfo.detailAddress,
					managerName: this.formInfo.managerName,
					managerPhone: this.formInfo.managerPhone,
					captcha: this.formInfo.captcha,

				}).then(success => {
					if(success.data.code == '200'){
						Toast('提交成功');
						this.$router.go(-1);
					}
				}).catch(error => {

				})
			},

			//点击获取验证码
			getImgCode(){
				if(!this.formInfo.managerPhone){
					Toast('请输入手机号');
					return;
				}

				this.$axios.post(this.$api.getImageCode, {
					phoneNumber: this.formInfo.managerPhone,

				}).then(success => {
					if(success.data.code == '200'){
						this.$refs.imgCode.innerHTML=`<img src="data:image/jpeg;base64,${success.data.data}" alt="验证码"/>`
					}
				}).catch(error => {

				})
			},

            //点击选择省/市/区
			clickArea(){
				this.showAreaBox = true;
			},
			areaConfirm(data){
				this.formInfo.domain = data[2].name;
				this.showAreaBox = false;
			},
			areaCancel(){
				this.showAreaBox = false;
			},
        },
    }
</script>

<style lang="scss" scoped>
    .captcha-box{
        display: inline-block;

        .img-code{
            display: inline-block;
            vertical-align: middle;
        }
        /*获取验证码*/
        .get-captcha{
            font-size: 14px;
            color: #61dda3;
            vertical-align: middle;
        }
    }


    /*表单信息*/
    .form-info{

        .title{
            font-size: 18px;
            font-weight: bold;
            color: #222222;
            padding: 16px 12px;
        }

        /*表单样式覆盖*/
        .van-cell-group{
            background-color: transparent;

            &::after {
                border: none;
            }

            .van-cell{
                background-color: transparent;
                border-top: 1px solid #ebedf0;
                padding-top: 16px;
                padding-bottom: 16px;
                font-size: 15px;
                color: #999999;

                &::after {
                    border: none;
                }
            }
            .van-cell--required::before{
                color: #999999;
            }
        }
    }

    /*温馨提示*/
    .tips-info{
        padding: 16px 12px;
        font-size: 15px;
        color: #222222;

        .title{
            font-weight: bold;
        }
        p{
            margin: 0;
            margin-top: 12px;
        }
    }

    /*提交按钮*/
    .btn-box{
        width: 94%;
        margin: 0 auto;
        margin-top: 20px;

        .van-button--default {
            background: linear-gradient(to bottom right, #61dda3, #07b6d5);
            border-radius: 8px;
        }
        .van-button__text{
            font-size: 18px;
            font-weight: bold;
            color: white;
        }
    }
</style>

<style>
    .captcha-box .img-code img{
        width: 80px;
        height: 30px;
    }
</style>

